<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plotly 图表与数据报告</title>
    <!-- 引入 Plotly JavaScript 库 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <h1>数据表格</h1>
    <table>
        <thead>
            <tr>
                {% for column in data.columns %}
                    <th>{{ column }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for index, row in data.iterrows() %}
                <tr>
                    {% for value in row %}
                        <td>{{ value }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <h1>Plotly 图表</h1>
    <div id="plotly-chart"></div>
    <script>
        var plotlyData = {{ plotly_chart | safe }};
        Plotly.newPlot('plotly-chart', plotlyData.data, plotlyData.layout);
    </script>
</body>
</html>